<template>
	<view class="consult">
		<app-title titleBackground="#8D84FF" ::lefticonSize='0' text="资讯" color="#fff"></app-title>
		<view class="consult_box">
			<view class="information_title">
				<view class="position_box_tab">
					<view :class="numTab === index?'position_box_list flag':'position_box_list'"
						v-for="(item,index) in list" :key="index" @click="numTabFun(index)">
						<view class="">
							{{item.title}}
						</view>
					</view>
				</view>
			</view>
			<view class="position_box">
				<view class="position_box_center">
					<view class="uni-margin-wrap">
						<swiper class="swiper" circular :current="numTab" @change="swiperChange($event)">
							<swiper-item class="swiper_item" v-for="(item,index) in list" :key="index">
								<view class="swiper_item_items" v-for="(items,indexs) in ParticularsList" :key="indexs"
									@click="GoToFun(items.id)">
									<image class="swiper_item_items_image" :src="items.resp_img" mode="widthFix">
									</image>
									<view class="swiper_item_items_title">
										{{items.article_title}}
									</view>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
		</view>
		<app-tab :tabIndex='1'></app-tab>
	</view>
</template>

<script>
	import appTitle from "@/components/appTitle.vue";
	import appTab from "@/components/appTab.vue";
	import {
		api_index_zixun
	} from '@/api/consult.js';
	export default {
		components: {
			appTitle,
			appTab
		},
		data() {
			return {
				ParticularsList: '',
				list: [{
						title: '公告',
					},
					{
						title: '资料',
					},
					{
						title: '视频',
					},
					{
						title: '教学',
					}
				],
				swiperHeight: 200,
				numTab: 0,
				page: 1,
				openid: '',
			};
		},
		onShow() {
			uni.hideTabBar();
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data;
					this.setData();
				},
				fail: () => {
					uni.reLaunch({
						url: '/pages/login/login'
					});
				}
			});

		},
		methods: {
			GoToFun(id) {
				uni.navigateTo({
					url: `./essay?id=${id}`
				})
			},
			async setData() {
				// this.ParticularsList = ''
				let updata = {
					type: this.numTab + 1,
					openid: this.openid
				}
				let res = await api_index_zixun(updata);
				this.ParticularsList = res.list;
				this.setSwiperHeight()
				console.log(res);
			},
			numTabFun(num) {
				this.numTab = num;
				this.setData();
			},
			jieshu(e) {
				if (e.detail.current !== this.numTab) {
					this.numTab = e.detail.current;
					this.setData();
				}
			},
			swiperChange(e, id) {
				this.numTab = e.detail.current;
				this.setData();
			},
			setSwiperHeight() {
				const element = "#swiper" + this.currIndex;
				const query = uni.createSelectorQuery().in(this);
				query.select(element).boundingClientRect();
				query.exec(res => {
					if (this.ParticularsList.length !== 0) {
						this.swiperHeight = 110 * 2 * this.ParticularsList.length;
					} else {
						this.swiperHeight = 110 * 2 * 4.7;
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.consult {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;


		.consult_box {
			width: 100%;
			flex: 1;
			overflow-y: auto;

			.information_title {
				margin: 0 auto;
				width: 100%;
				margin-top: 10px;

				text-align: center;
				color: #fff;
				box-sizing: content-box;

				.position_box_tab {
					width: 100%;
					display: flex;
					justify-content: space-around;
					color: #000;
					align-items: center;
					line-height: 1.5;
					// background: url('/static/zixun/title_box.png') 0 0 no-repeat;
					background-size: 100% 100%;
					box-sizing: border-box;
					padding: 20rpx;

					.position_box_list {
						// width: 50%;
						font-size: 34rpx;
						// font-weight: 700;
						color: #9AABB9;
						padding: 0 10rpx;
						padding-bottom: 10rpx;
						border-bottom: 8rpx solid #fff;
					}


					.flag {
						color: #000;
						border-bottom: 8rpx solid #6257E8;
					}
				}
			}

			.position_box {
				height: 70vh;
				width: 100%;

				.position_box_center {

					.uni-margin-wrap {
						// padding: 100rpx 0;

						.swiper {
							height: 70vh;
							width: 100%;
							// width: calc(100vw - 30px);
							// margin: 0 auto;
							//  box-shadow: 0 0 10px #4a4a4a;
							//  border-radius: 10px;
							//  overflow: hidden;
							box-sizing: border-box;
							padding: 0 10px;

							.swiper_item {
								width: 100%;
								display: flex;
								flex-wrap: wrap;
								justify-content: space-between;
								padding: 10rpx;
								align-content: flex-start;
								box-sizing: border-box;
								overflow-y: auto;

								.swiper_item_items {
									width: 324rpx;
									height: 300rpx;
									margin: 15rpx 0;
									display: flex;
									flex-direction: column;
									justify-content: space-between;

									.swiper_item_items_image {
										width: 100%;
										height: 224rpx;
										box-shadow: 0 0 20rpx #ccc;
										border-radius: 20rpx;
									}

									.swiper_item_items_title {
										height: 60rpx;
										line-height: 60rpx;
										font-size: 36rpx;
										text-align: center;
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>